<template>
  <el-scrollbar height="calc(100vh - 60px)">
    <div class="store-container">
      <div class="store-header">
        <div class="store-header-title">
          <img class="store-header-title-img" src="../../assets/img/shop/cat-header3.png">
          猫咪种类
          <div class="store-header-title-divider"></div>
        </div>
        <div class="store-header-body">
          <div class="store-header-body-row" v-for="(list, index) in catCategoryList" :key="index">
            <div class="store-header-col" v-for="kind in list" :key="kind.cateName">
              <div style="text-align: center;" @click="handlePathChange(kind.path)">
                <img class="store-header-col-img" :src="kind.imgPath">
                <div class="store-header-col-text">{{ kind.cateName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="store-body">
        <div class="store-body-title">
          <i class="icon-size-big icon-color iconfont cat-icon-chongwutubiao12"></i>
          {{ shortMap[kind] }}
        </div>
        <div class="store-body-main">
          <el-card style="margin-bottom: 10px; margin-right: 10px" v-for="item in store[kind]" :key="item.imgPath" :body-style="{ padding: '0px', width: '250px' }">
            <img :src="item.imgPath" style="width: 100%">
            <div style="padding: 14px;">
              <span>{{ item.subKind }}</span>
              <div class="bottom">
                <el-button type="text" @click="open">认领回家</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import { store } from '../../assets/js/shop/store.js'

export default {
  data() {
    return {
      catCategoryList: [
          [
            {
                imgPath: require('../../assets/img/shop/cat-kind1.jpg'),
                cateName: '布偶猫',
                path: 'buou'
            },
            {
                imgPath: require('../../assets/img/shop/cat-kind2.jpg'),
                cateName: '德文卷毛猫',
                path: 'dewen'
            },
            {
                imgPath: require('../../assets/img/shop/cat-kind3.jpg'),
                cateName: '矮脚曼基康',
                path: 'aijiao'
            },
            {
                imgPath: require('../../assets/img/shop/cat-kind4.jpg'),
                cateName: '波斯猫',
                path: 'bosi'
            },
            {
                imgPath: require('../../assets/img/shop/cat-kind5.jpg'),
                cateName: '美国短毛猫',
                path: 'meiduan'
            }
          ],
          [
            {
                imgPath: require('../../assets/img/shop/cat-kind6.jpg'),
                cateName: '英国短毛猫',
                path: 'yingduan'
            },
            {
                imgPath: require('../../assets/img/shop/cat-kind7.jpg'),
                cateName: '金吉拉',
                path: 'jinjila'
            },
            {
                imgPath: require('../../assets/img/shop/cat-kind8.jpg'),
                cateName: '加菲猫',
                path: 'jiafei'
            },
            {
                imgPath: require('../../assets/img/shop/cat-kind9.jpg'),
                cateName: '金渐层',
                path: 'jinjianceng'
            },
            {
                imgPath: require('../../assets/img/shop/cat-kind10.jpg'),
                cateName: '银渐层',
                path: 'yinjianceng'
            }
          ],
          [
            {
                imgPath: require('../../assets/img/shop/cat-kind11.jpg'),
                cateName: '暹罗猫',
                path: 'xianluo'
            },
            {
                imgPath: require('../../assets/img/shop/cat-kind12.jpg'),
                cateName: '缅因猫',
                path: 'mianyin'
            },
            {
                imgPath: require('../../assets/img/shop/cat-kind13.jpg'),
                cateName: '孟加拉豹猫',
                path: 'mengjiala'
            },
            {
                imgPath: require('../../assets/img/shop/cat-kind14.jpg'),
                cateName: '俄罗斯蓝猫',
                path: 'elan'
            },
            {
                imgPath: require('../../assets/img/shop/cat-kind15.jpg'),
                cateName: '黑白柯尼斯卷毛猫',
                path: 'kenisi'
            }
          ]
      ],
      store: store,
      shortMap: {'buou': '布偶猫', 'dewen': '德文卷毛猫', 'aijiao': '矮脚曼基康', 'bosi': '波斯猫',
        'meiduan': '美国短毛猫', 'yingduan': '英国短毛猫', 'jinjila': '金吉拉', 'jiafei': '加菲猫',
        'jinjianceng': '金渐层', 'yinjianceng': '银渐层', 'xianluo': '暹罗猫', 'mianyin': '缅因猫',
        'mengjiala': '孟加拉豹猫', 'elan': '俄罗斯蓝猫', 'kenisi': '黑白柯尼斯卷毛猫'
      }
    }
  },
  computed: {
    kind() {
      const name = this.shortMap[this.$route.params.kind]
      this.$store.dispatch('changeShopBreadcrumb', [{ path: '/shop', name: '首页' }, { name: "猫舍" }, { name: name }]);

      return this.$route.params.kind;
    }
  },
  methods: {
    handlePathChange(path) {
      this.$router.replace('/shop/store/'+ path);
    },
    open() {
      const randomKey = 'xxxx-xxxx-4xxx-yxxx'.replace(/[xy]/g, function (c) {
          var r = Math.random() * 16 | 0,
              v = c == 'x' ? r : (r & 0x3 | 0x8);
          return v.toString(16);
      });

      this.$alert(randomKey, '请复制你的Cat-Key', {
        confirmButtonText: '前往服务中心',
        callback: action => {
          if (action === 'confirm') {
            this.$router.replace('/loginid');
          }
        }
      });
    }
  },
  beforeMount() {
      const name = this.shortMap[this.kind]
      this.$store.dispatch('changeShopBreadcrumb', [{ path: '/shop', name: '首页' }, { name: "猫舍" }, { name: name }]);
  }
}
</script>

<style lang="less">
  @import url('../../assets/less/common.less');

  .icon-color {
    color: @theme-color;
  }

  .icon-size-big {
    font-size: 25px;
  }

  .el-message-box__message {
    text-align: center;
    padding-top: 6px;
    height: 30px;
    margin: 0 30px;
    background-color: @backgroud-color;
    font-size: 16px;
    color: @theme-color;
    border-radius: 5px;
  }

  .store-container {
    margin: 20px 20px 0 20px;
    .store-header {
      .store-header-title {
          padding: 10px;
          font-family: "catfont";
          font-size: 28px;
          margin-left: 50px;
          line-height: 35px;
          .store-header-title-img {
              width: 32px;
              margin-bottom: -20px;
              margin-left: -8px;
              margin-right: 2px;
          }
          .store-header-title-divider {
              width: 56%;
              border-top: 3px solid @theme-color;
          }
        }
        .store-header-body {
            margin-right: 55px;
            padding-top: 5px;
            padding: 0 20px;
            .store-header-body-row {
                display: flex;
                justify-content: space-around;
                margin-top: 15px;
                .store-header-col {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    font-size: 14px;
                    font-weight: 300;
                    width: 112px;
                    .store-header-col-img {
                        width: 60px;
                        border-radius: 35px;
                        border: 4px solid rgb(241, 234, 234);
                        margin-bottom: 4px;
                    }
                    .store-header-col-text {
                        border-bottom: 1px solid #fff;
                    }
                    &:hover {
                        cursor: pointer;
                        .store-header-col-text {
                            border-bottom: 1px dotted @theme-color;
                            color: @theme-color;
                        }
                    }
                }
            }
        }
    }
    .store-body {
      margin-top: 40px;
      
      .store-body-title {
        text-align: center;
        font-family: 'catfont';
        font-size: 28px;
      }
      .store-body-main {
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;
        margin-left: 70px;
        margin-bottom: 30px;
      }
    }
  }
</style>